<!--
 * @Author: Wangtao
 * @Date: 2020-10-22 19:27:39
 * @LastEditors: Wangtao
 * @LastEditTime: 2020-12-09 11:37:17
-->
<template>
  <div class="canvas-operation-wrap">
    <breadcrumb :titleArr="titleArr" @back="breadcrumbBack" class="bread-crumb"></breadcrumb>
    <div class="canvas-operation">
      <div class="canvas-operation-left">
        <div>
          <span>名称</span
          ><el-input size="mini" placeholder="请输入名称" v-model.trim="formData.name" ref="nameRef"></el-input>
        </div>
        <div>
          <span>服务号</span>
          <el-select-v2
            size="mini"
            style="width: 188.5px"
            v-model="formData.numbers"
            :placeholder="'请选择服务号'"
            collapse-tags
            collapse-tags-tooltip
            filterable
            multiple
            @remove-tag="onRemove"
            :options="serviceNumList"
          >
          </el-select-v2>
        </div>
        <div>
          <span>备注</span><el-input size="mini" placeholder="请输入备注" v-model.trim="formData.remark"></el-input>
        </div>
      </div>
      <div class="canvas-operation-right">
        <div class="button-group" @click="enlargeCanvas">
          <div class="operation-btn">
            <i v-if="!enlargeState" style="color: var(--mc-main-color)" class="MC_iconfont MC_icon-pingmu-quanping"></i>
            <i v-else class="MC_iconfont MC_icon-pingmu-tuichuquanping"></i>
          </div>
        </div>
        <div class="button-group" @click="scale('default')">
          <div class="operation-btn">
            <i class="MC_iconfont MC_icon-dingwei"></i>
          </div>
        </div>
        <div class="button-group button-oprate">
          <div class="operation-btn" @click="scale('in')">
            <i class="MC_iconfont MC_icon-suofangqi-suoxiao-xian"></i>
          </div>
          <div class="operation-btn" @click="scale('out')">
            <i class="MC_iconfont MC_icon-tianjia-yuan-xian"></i>
          </div>
        </div>
        <div class="button-group">
          <el-button size="mini" type="primary" @click="ivrSave">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import breadcrumb from '../../../components/breadCrumb.vue'
import { withDefaults, defineProps, onMounted, defineEmits, ref, watch, toRefs, reactive, toRaw } from 'vue'
import { ElMessage } from 'element-plus'
import mcGetCache from '@/common/utils/mc-get-cache'
import { cloneDeep, set } from 'lodash'
interface FormData {
  name: string
  numbers: any[]
  remark: string
}
interface State {
  enlargeState: boolean
  titleArr: string[]
  formData: FormData
  serviceNumList: any[]
  numberList: any[]
}

const props = withDefaults(
  defineProps<{
    data: any
  }>(),
  {
    data: null
  }
)

const state: State = reactive({
  enlargeState: false,
  titleArr: ['IVR语音导航', '编辑IVR语音导航'],
  formData: {
    name: '',
    numbers: [],
    remark: ''
  },
  serviceNumList: [],
  numberList: []
})

const emits = defineEmits<{
  (e: 'scale', type: string): void
  (e: 'pageBack'): void
  (e: 'enlarge', isEnlarge: boolean): void
  (e: 'save', data: FormData): void
}>()

const nameRef: any = ref(null)

onMounted(() => getCanUseNum())

const scale = (type: string) => {
  emits('scale', type)
}

const breadcrumbBack = () => {
  emits('pageBack')
}

const enlargeCanvas = () => {
  state.enlargeState = !state.enlargeState
  emits('enlarge', state.enlargeState)
}

const ivrSave = () => {
  if (!state.formData.name) {
    ElMessage.error('语音导航名称必填！')
    nameRef.value.focus()
    return
  }
  emits('save', state.formData)
}

const onRemove = (id: string) => {
  const data = cloneDeep(toRaw(state.serviceNumList.find((i: any) => i.id === id)))
  data.ivrId = null
  mcGetCache.$updateCacheBySingleKey('serveNum', data, 'id', 'hasObj')
  set(
    state.serviceNumList.find((i: any) => i.id === id),
    'disabled',
    false
  )
}

const getCanUseNum = async () => {
  const res = await mcGetCache.$getCache('serveNum')
  state.serviceNumList = res.map((i: any) => ({ ...i, label: i.id, value: i.id, disabled: i.ivrId }))
}

watch(
  () => props.data,
  (newData) => {
    const data: any = state.formData
    for (const k in data) {
      if (k === 'numbers') {
        data[k] = newData[k] || []
      } else {
        data[k] = newData[k] || ''
      }
    }
  },
  { immediate: true, deep: true }
)

const { titleArr, formData, serviceNumList, enlargeState } = toRefs(state)
</script>

<style lang="stylus" scoped>
.canvas-operation-wrap
  position absolute
  top 0
  left 0
  width 100%
  z-index 100
  :deep(.bread-crumb)
    box-shadow unset !important
.canvas-operation
  display flex
  justify-content space-between
  padding 24px
  border-bottom: 1px solid #ebebeb;
  .canvas-operation-right
    display flex
    align-items center
    .button-group
      display flex
      align-items center
      margin-left 10px
      .V7_iconV7tubiao_suoxiao
        font-size 14px
      .V7_iconV7tubiao_xinzeng
        font-size 14px
      .operation-btn
        background white
        color #8D9DB0
        border-radius 3px
        width 32px
        height 32px
        cursor pointer
        text-align center
        display flex
        justify-content center
        align-items center
        i
          font-size 15px
          color: rgba(0, 0, 0, 0.88);
      .operate-btn:nth-of-type(1)
        color var(--mc-main-color)
    .button-oprate
      div:nth-child(1)
        border-top-right-radius 0
        border-bottom-right-radius 0
      div:nth-child(2)
        border-top-left-radius 0
        border-bottom-left-radius 0
  .canvas-operation-left
    display flex
    align-items center
    :deep(.el-select-v2__input-wrapper)
      width 100px !important
    > div
      display flex
      align-items center
      margin-right 10px
      span
        white-space: nowrap;
        /* margin-right: 5px; */
        color: #303753;
        display: inline-block;
        height: 36px;
        /* border-right: unset; */
        background: #fff;
        line-height: 25px;
        position: relative;
        right: -1px;
        border: 1px solid rgb(221 223 230);
        padding: 4px 10px;
        box-sizing: border-box;
        border-radius: 4px 0 0 4px;
      :deep(.el-select-v2__wrapper)
        border-radius 0 4px 4px 0
        height 36px
      :deep(.el-select-v2__wrapper.is-focused)
        border 1px solid rgb(221 223 230)
      :deep(.el-input__wrapper)
        border-radius 0 4px 4px 0
      :deep(.el-input__wrapper.is-focus)
        box-shadow 0 0 0 1px rgb(221 223 230) inset
      >>> .el-input__inner
        background white
        height 32px
        line-height 32px
        padding 0 8px
</style>
